<template>
    <div class="ele-body">
        <el-card shadow="never">
            <el-form
            :model="where"
            label-width="90px"
            class="ele-form-search"
            @keyup.enter.native="reload"
            @submit.native.prevent>
                <el-row :gutter="15">
                    <el-col :lg="12" :md="12">
                        <el-form-item label="结算周期:">
                            <el-date-picker
                                style="width: 100%"
                                v-model="where.record_date"
                                type="daterange"
                                value-format="yyyy-MM-dd"
                                label-format="yyyy-MM-dd"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :lg="12" :md="12">
                        <el-form-item label="推广员:">
                            <PageSelect
                            :placeholder="'请选择推广员'"
                            v-model="where.promote_id"
                            :whereName="'realname'"
                            :url="'/userpromote/index'"
                            :optionLable="'realname'"
                            :optionvalue="'id'"
                            :multiple="false"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :lg="12" :md="12">
                        <el-form-item label="一级推广员:">
                            <PageSelect
                            :placeholder="'请选择一级推广员'"
                            v-model="where.promote_1_id"
                            :whereName="'realname'"
                            :url="'/userpromote/index?level=1'"
                            :optionLable="'realname'"
                            :optionvalue="'id'"
                            :multiple="false"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :lg="12" :md="12">
                        <el-form-item label="状态:" prop="status">
                            <el-select
                                clearable
                                v-model="where.status"
                                placeholder="请选择状态"
                                class="ele-fluid"
                            >
                                <el-option label="未结算" :value="1" />
                                <el-option label="结算中" :value="2" />
                                <el-option label="已结算" :value="3" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :lg="12" :md="12">
                        <el-form-item label="结算时间:">
                            <el-date-picker
                                style="width: 100%"
                                v-model="where.settlement_time"
                                type="daterange"
                                value-format="yyyy-MM-dd"
                                label-format="yyyy-MM-dd"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :lg="6" :md="12">
                        <div class="ele-form-actions">
                            <el-button
                                type="primary"
                                icon="el-icon-search"
                                class="ele-btn-icon"
                                size="small"
                                @click="reload"
                                >查询
                            </el-button>
                            <el-button @click="reset" size="small">重置</el-button>
                        </div>
                    </el-col>
                    <el-col :lg="6" :md="12">
                        <el-button
                            size="small"
                            type="success"
                            @click="setStatement(null)"
                            >批量生成对账单
                        </el-button>
                        <el-button
                            size="small"
                            @click="revocation(null)"
                            >批量撤回
                        </el-button>
                        <el-button
                            size="small"
                            @click="exportExcel()"
                        >
                            导出
                        </el-button>
                    </el-col>
                </el-row>
            </el-form>
            <el-row :gutter="15" class="total-card">
                <el-col :lg="12" :md="12">当前页结算金额:{{ allData.pageMoney }}</el-col>
                <el-col :lg="12" :md="12">总结算金额:{{ allData.allMoney }}</el-col>
            </el-row>
                <!-- 数据表格 -->
                <el-table :data="tableData" border style="width: 100%" :row-class-name="tableRowClassName" :height="tableHeight" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="45" align="center" fixed="left"></el-table-column>
                <el-table-column label="结算单号" prop="settlement_number" width="240" align="left"></el-table-column>
                <el-table-column label="结算周期" prop="record_date" width="180" align="left"></el-table-column>
                <el-table-column label="推广员名称" prop="promote_account" width="120" align="center"></el-table-column>
                <el-table-column label="总充值" prop="total_money" width="120" align="center"></el-table-column>
                <!-- <el-table-column label="分成比例" prop="proportion" width="120" align="center"></el-table-column> -->
                <el-table-column label="结算金额" prop="sum_money" width="120" align="center"></el-table-column>
                <el-table-column label="事件金额" prop="event_money" width="120" align="center"></el-table-column>
                <el-table-column label="事件原因" prop="remark" width="120" align="center"></el-table-column>
                <el-table-column label="违规事件金额" prop="violation_amount" width="120" align="center"></el-table-column>
                <el-table-column label="违规事件原因" prop="violation_remark" width="120" align="center"></el-table-column>
                <el-table-column label="打款状态" width="120" align="center">
                    <template slot-scope="scope">
                        <div v-if="scope.row.status==1">未打款</div>
                        <div v-else-if="scope.row.status==2">已打款</div>
                        <div v-else-if="scope.row.status==3">审核中</div>
                        <div v-else-if="scope.row.status==4">拒绝打款</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="260" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button
                            size="small"
                            type="success"
                            class="ele-btn-icon"
                            @click="setStatement(scope.row)"
                            >生成对账单
                        </el-button>
                        <el-button
                            size="small"
                            type="primary"
                            class="ele-btn-icon"
                            @click="queryDetails(scope.row)"
                            >详情
                        </el-button>
                        <el-button
                            size="small"
                            class="ele-btn-icon"
                            @click="revocation(scope.row)"
                            >撤回
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="where.page"
                :page-sizes="[10, 20, 30, 40,50,100]"
                :page-size="where.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>
        <el-dialog
            title="结算单详情"
            :visible.sync="visible"
            width="60%"
            >
            <el-form
                v-model="dialogForm"
                label-width="120px"
                :inline="true"
            >
                <el-form-item label="结算日期:">
                    <div class="dialog-text">
                        {{ dialogForm.record_date }}
                    </div>
                    
                </el-form-item>
                <el-form-item label="分成比例:">
                    <div class="dialog-text">
                        {{ dialogForm.proportion }}
                    </div>
                </el-form-item>
                <el-form-item label="推广员:">
                    <div class="dialog-text">
                        {{ dialogForm.promote_account }}
                    </div>
                </el-form-item>
                <el-form-item label="总充值:">
                    <div class="dialog-text">
                        {{ dialogForm.total_money }}
                    </div>
                </el-form-item>
                <el-form-item label="注册人数:">
                    <div class="dialog-text">
                        {{ dialogForm.total_number }}
                    </div>
                </el-form-item>
                <el-form-item label="结算金额:">
                    <div class="dialog-text">
                        {{ dialogForm.sum_money }}
                    </div>
                </el-form-item>
                <el-form-item label="游戏:">
                    <div class="dialog-text">
                        {{ dialogForm.package_name }}
                    </div>
                </el-form-item>
                <el-form-item label="事件金额:">
                    <div class="dialog-text">
                        {{ dialogForm.event_money }}
                    </div>
                </el-form-item>
                <el-form-item label="事件原因:">
                    <div class="dialog-text">
                        {{ dialogForm.remark }}
                    </div>
                </el-form-item>
                <el-form-item label="违规事件金额:">
                    <div class="dialog-text">
                        {{ dialogForm.violation_amount }}
                    </div>
                </el-form-item>
                <el-form-item label="违规事件原因:">
                    <div class="dialog-text">
                        {{ dialogForm.violation_remark }}
                    </div>
                </el-form-item>
                <el-form-item label="预结算总金额:">
                    <div class="dialog-text">
                        {{ sum_money }}
                    </div>
                </el-form-item>
                <el-form-item label="总结算金额:">
                    <div class="dialog-text">
                        {{ settlement.sum_money }}
                    </div>
                </el-form-item>
                <el-form-item label="异常事件金额:">
                    <div class="dialog-text">
                        {{ settlement.event_money }}
                    </div>
                </el-form-item>
                <el-form-item label="异常事件原因:">
                    <div class="dialog-text">
                        {{ settlement.remark }}
                    </div>
                </el-form-item>
                <el-form-item label="违规事件金额:">
                    <div class="dialog-text">
                        {{ settlement.violation_money }}
                    </div>
                </el-form-item>
                <el-form-item label="违规事件原因:">
                    <div class="dialog-text">
                        {{ settlement.violation_remark }}
                    </div>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="visible=false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import PageSelect from "@/components/pageSelect/index.vue";
import {downloadExcel} from "@/utils/excel-export";
export default{
    name:'settlement',
    components:{PageSelect},
    data(){ 
        return{
            where:{
                limit:10,
                page:1,
            },
            allData:{},
            tableHeight:'calc(100vh - 315px)',
            tableData:[],
            selection:[],
            total:0,
            visible:false,
            sum_money:'',
            settlement:{},
            dialogForm:{},
        }
    },
    created(){
        this.reload()
    },
    mounted(){

    },
    methods:{
        handleCurrentChange(val) {
            console.log(val)
           this.reload()
        },
        handleSizeChange(val) {
            console.log(val)
            this.reload()
        },
        //重置
        reset(){
            this.where={
                limit:10,
                page:1,
            }
            this.reload()
        },
        //导出
        exportExcel(){
            downloadExcel(`Settlement/export`, this.where)
        },
        //撤回
        revocation(row){
            let ids=[]
            if(row){
                ids.push(row.id)
            }else{
                if(this.selection&&this.selection.length>0){
                    this.selection.forEach(item=>{
                        ids.push(item.id)
                    })
                }else{
                    this.$message.warning('请选择需要撤回的数据!')
                    return false;
                }
            }
            this.$http.post('/Settlement/setRevoke',{id:ids}).then(res=>{
                if(res.data.code=== 0 ){
                    this.$message.success('撤回成功!')
                    this.reload()
                }else{
                    this.$message.error(res.data.msg)
                }
            })
        },
        //生成对账单
        setStatement(row){
            let ids=[]
            if(row){
                ids.push(row.id)
            }else{
                if(this.selection&&this.selection.length>0){
                    this.selection.forEach(item=>{
                        ids.push(item.id)
                    })
                }else{
                    this.$message.warning('请选择需要生成对账单的数据!')
                    return false;
                }
            }
            this.$http.post('/Settlement/setStatement',{id:ids}).then(res=>{
                if(res.data.code=== 0 ){
                    this.$message.success('对账单生成成功!')
                    this.reload()
                }else{
                    this.$message.error(res.data.msg)
                }
            })
        },
        //查询
        reload(){
            this.$http.get('/Settlement/index',this.where).then(res=>{
                if(res.data.code === 0){
                    this.tableData=res.data.data
                    this.allData=res.data.allData
                    this.total=res.data.count
                }else{
                    this.$message.error(res.data.msg)
                }
            })
        },
        //查看详情
        queryDetails(row){
            this.$http.post('/Settlement/getDetails',{id:row.id}).then(res=>{
                if(res.data.code === 0){
                    this.visible=true
                    this.dialogForm=res.data.data.data[0]
                    this.sum_money=res.data.data.sum_money
                    this.settlement=res.data.data.settlement
                }else{
                    this.$message.error(res.data.msg)
                }
            })
        },
        handleSelectionChange(val) {
            this.selection = val;
        },
        //el-table  根据数值动态添加类名
        tableRowClassName({row, rowIndex}){
            console.log(rowIndex)
            if(row.is_default==1){
                return 'table-red'
            }
        },
    },
}
</script>
<style scoped>
.total-card{
    width: 100%;
    height: 40px;
    margin-bottom: 10px;
    border: 1px solid var(--border-color-lighter);
    border-radius: 10px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    margin-left:0px !important;
}
::v-deep .el-table .table-red {
    color: #de5353 !important;
  }
  .dialog-text{
    width: 160px;
    font-weight: bold;
  }
</style>